<template>
	<view class="AddStation">
		<u-form :model="params" :rules="rules" ref="uForm">
			<u-form-item required label="驿站名称" prop="siteName" ref="siteName" labelWidth="166rpx">
				<u--input v-model="params.siteName" class="size-28 color3" placeholder-class="building-plac" type="text"
					border="none" clearable placeholder="请输入驿站名称"></u--input>
			</u-form-item>
			<view @click="onOpenMap">
				<u-form-item required label="驿站地址" prop="siteAddress" ref="siteAddress" labelWidth="166rpx">
					<u--input v-model="params.siteAddress" class="size-28 color3" placeholder-class="building-plac"
						type="text" border="none" placeholder="请选择驿站地址" readonly>
					</u--input>
					<text slot="right" class="iconfont icon-right-1-copy color9"></text>
				</u-form-item>
			</view>
			<u-form-item required label="详细地址" prop="siteAddressDetails" ref="siteAddressDetails" labelWidth="166rpx">
				<u--input v-model="params.siteAddressDetails" clearable class="size-28 color3"
					placeholder-class="building-plac" type="text" border="none" placeholder="请输入详细地址"></u--input>
			</u-form-item>
			<picker mode='time' :value="params.startTime" :end="params.endTime"
				@change="onChooseHours($event,'startTime')">
				<u-form-item required label="开始营业" prop="startTime" ref="startTime" labelWidth="166rpx">
					<u--input v-model="params.startTime" class="size-28 color3" placeholder-class="building-plac"
						type="text" border="none" placeholder="请选择开始营业时间" readonly></u--input>
					<text slot="right" class="iconfont icon-right-1-copy color9"></text>
				</u-form-item>
			</picker>
			<picker mode='time' :value="params.endTime" :start="params.startTime"
				@change="onChooseHours($event,'endTime')">
				<u-form-item required label="结束营业" prop="endTime" ref="endTime" labelWidth="166rpx">
					<u--input v-model="params.endTime" class="size-28 color3" placeholder-class="building-plac"
						type="text" border="none" placeholder="请选择结束营业时间" readonly></u--input>
					<text slot="right" class="iconfont icon-right-1-copy color9"></text>
				</u-form-item>
			</picker>
		</u-form>
		<view class="add-goods app-bottom-left f5-background inset-bottom dis">
			<u-button :disabled="disabled" type="primary" @click="onSubmit"
				:customStyle="{width: '690rpx',height: '96rpx',margin:'0 aotu', borderRadius: '100rpx'}"
				color="#EB0000">
				<text class="color-f font-weight-500 size-34 margin-left-12">确认</text>
			</u-button>
		</view>
	</view>
</template>

<script>
	import { addressKey } from '@/utils/public';
	import { AddUpdSite, TeamLeaderSiteInfo } from '@/api/index'
	var QQMapWX = require('@/utils/address-analyze/qqmap-wx-jssdk');
	var qqmapsdk = new QQMapWX({
		key: addressKey
	});
	export default {
		data() {
			return {
				disabled: false,
				rules: {
					siteName: {
						type: 'string',
						required: true,
						message: '请输入驿站名称',
						trigger: ['blur', 'change']
					},
					siteAddress: {
						type: 'string',
						required: true,
						message: '请选择驿站地址',
						trigger: ['blur', 'change']
					},
					siteAddressDetails: {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					startTime: {
						type: 'string',
						required: true,
						message: '请选择开始营业',
						trigger: ['blur', 'change']
					},
					endTime: {
						type: 'string',
						required: true,
						message: '请选择结束营业',
						trigger: ['blur', 'change']
					},
				},
				params: {
					id: 0,
					siteName: '', // 驿站名称
					siteAddress: '', //  驿站地址
					siteAddressDetails: '', //  详细地址
					startTime: '', // 开始营业
					endTime: '', // 结束营业
					latitude: 0, // 经度
					longitude: 0, // 维度
				}
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			if (options.id) this.postTeamLeaderSiteInfo(options.id)
		},
		methods: {
			async postTeamLeaderSiteInfo(id) {
				const { params } = this
				const { code, data } = await TeamLeaderSiteInfo({ siteId: id })
				if (code == '200') {
					for (let i in params) {
						params[i] = data[i]
					}
					this.params = params
				}
			},
			// 提交验证数据
			onSubmit() {
				const _this = this
				_this.borderErr = false
				this.$refs.uForm.validate().then(res => {
					_this.postAddUpdSite()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
					_this.borderErr = true
				})
			},
			// 添加驿站
			async postAddUpdSite() {
				this.disabled = true
				const { params } = this
				params.startTime = params.startTime
				params.endTime = params.endTime
				const { data, code } = await AddUpdSite(this.params)
				if (code == '200') {
					uni.$u.toast('操作成功', 900)
					setTimeout(() => {
						uni.navigateBack({})
					}, 1000)
				} else this.disabled = false
			},
			// 打开地图
			onOpenMap() {
				const _this = this
				uni.chooseLocation({
					success: function(resData) {
						if (!resData.address) {
							uni.$u.toast('请先选择地址', 2000)
							return
						}
						_this.params.latitude = resData.latitude
						_this.params.longitude = resData.longitude
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: resData.latitude * 1,
								longitude: resData.longitude * 1
							},
							success: function(res) { //成功后的回调
								console.log(res)
								const { province, city, district } = res.result.address_component
								const { landmark_l2, town } = res.result.address_reference
								_this.params.siteAddress = `${province}${city}${district}`
								_this.params.siteAddressDetails = resData.address.slice(_this
									.params.siteAddress.length)
								_this.$refs.uForm.clearValidate(['siteAddress',
									'siteAddressDetails'
								]);
							}
						})
					}
				});
			},
			// 选择营业时间
			onChooseHours(event, name) {
				console.log(event, name)
				this.params[name] = event.detail.value
			}
		},

	}
</script>

<style lang="scss">
	.AddStation {
		padding: 24rpx;

		// 输入部分
		.building-plac {
			color: #BCBCBC;
		}

		.u-form {
			padding-left: 42rpx;
			margin-bottom: 54rpx;
			background: #ffffff;
			border-radius: 24rpx;

			.uicon-close {
				font-size: 30rpx !important;
			}
		}

		.u-input__content__field-wrapper__field {
			height: 120rpx !important;
		}

		.u-form-item__body__right {
			padding-right: 24rpx;
		}

		.u-form-item__body {
			border-bottom: 1px solid #F1F1F1;
		}

		.u-form-item__body__left__content__label,
		.u-input__content__field-wrapper__field {
			font-size: 32rpx !important;
		}

		.add-goods {
			height: 168rpx;
			width: 100%;
			position: fixed;
		}
	}
</style>